import Icon from '@/components/Icon';
import styles from './index.module.scss';
import dayjs from 'dayjs';
import { useState } from 'react';
import { Popup } from 'antd-mobile';
import NavBar from '@/components/NavBar';
import NoComment from '../NoComment';
import CommentReply from './../CommentReply/index';
import ArticleFooter from './../ArticleFooter/index';
import Textarea from '@/components/Textarea';
import { useDispatch } from 'react-redux';
import { Comment } from '@/store/reducer/comment';
import { changeCommentDetailActionCreator } from '@/store/action/comment';

type Props = {
  comment: any;
};

export default function CommentItem({ comment }: Props) {
  const dispatch = useDispatch();
  const [showCommentReply, setShowCommentReply] = useState(false);
  const [type, setType] = useState(0);
  const [showReplyCommentReply, setShowReplyCommentReply] = useState(false);
  const [replyContent, setReplyContent] = useState('');
  // console.log(23, comment);
  // 给评论点赞和取消点赞
  const handleChangeCommentDetail = async (id: any, isliking: any) => {
    const newIsLiking = !isliking;
    // 调用发起异步请求的action
    await dispatch(changeCommentDetailActionCreator(id, newIsLiking));
  };

  // 点击回复评论里面发表
  const handleReplySubmit = () => {};

  if (!comment.aut_name) return <h3>这里是评论列表</h3>;

  return (
    <div className={styles.root}>
      {/* 评论者头像 */}
      <div className="avatar">
        <img src={comment.aut_photo} alt="" />
      </div>

      <div className="comment-info">
        {/* 评论者名字 */}
        <div className="comment-info-header">
          <span className="name">{comment.aut_name}</span>

          {/* 关注或点赞按钮 */}
          <span
            className="thumbs-up"
            onClick={() =>
              handleChangeCommentDetail(comment.com_id, comment.is_liking)
            }
          >
            {comment.like_count}
            <Icon
              type={comment.is_liking ? 'iconbtn_like_sel' : 'iconbtn_like2'}
            />
          </span>
        </div>

        {/* 评论内容 */}
        <div className="comment-content">{comment.content}</div>

        <div className="comment-footer">
          {/* 回复按钮 */}

          <span
            className="replay"
            onClick={() => {
              setShowCommentReply(true);
              setType(1);
            }}
          >
            {comment.reply_count}回复 <Icon type="iconbtn_right" />
          </span>

          {/* 评论日期 */}
          <span className="comment-time">
            {/* {dayjs(comment.pubdate).format('YYYY-MM-DD hh:mm:ss')} */}
            {dayjs().from(comment.pubdate)}
          </span>
        </div>
      </div>
      {/* 显示回复当前评论的弹框 */}
      <Popup
        visible={showCommentReply}
        position="right"
        bodyStyle={{ minWidth: '100vw' }}
      >
        <NavBar onBack={() => setShowCommentReply(false)}>0条回复</NavBar>
        {/* 评论列表 */}
        <CommentReply commentReply={comment}></CommentReply>
        <p>全部回复</p>
        <NoComment />
        <ArticleFooter
          type={type}
          onCommentReply={() => setShowReplyCommentReply(true)}
        ></ArticleFooter>
      </Popup>

      {/* 回复评论的弹框 */}
      <Popup
        visible={showReplyCommentReply}
        position="bottom"
        bodyStyle={{ minHeight: '100%' }}
      >
        {/* 顶部导航栏 */}
        <NavBar
          right={
            <span className="publish" onClick={handleReplySubmit}>
              发表
            </span>
          }
          onBack={() => setShowReplyCommentReply(false)}
        >
          回复评论
        </NavBar>
        <Textarea
          placeholder={`@${comment.aut_name}`}
          className="textarea"
          maxLength={100}
          value={replyContent}
          onChange={(e) => setReplyContent(e.target.value.trim())}
          autoFocus
        />
      </Popup>
    </div>
  );
}
